<template>
	<view class="shop-detail">
		<view class="banner-wrap">
			<swiper class="swiper banner-swiper" :interval="2000" :autoplay="true"  :circular="true" indicator-dots indicator-color="#eeeeee" indicator-active-color="#cfa972"
			 active-class="indicator-active">
					<swiper-item v-for="item in imgList" :key='item.imgUrl' class="banner-item">
						<image class="banner-img" :src="item.imgUrl"></image>
					</swiper-item>
			</swiper>
		</view>

		<view class="shop-info">
			<view class="shop-price">
				<view class="shop-price__l">
					<text class="price yuan">{{info.presentPrice | formatMoney}}</text>
					<text class="origin-price yuan" v-if="info.presentPrice !== info.fixedPrice">{{info.fixedPrice | formatMoney}}</text>
				</view>
				<view class="tpl-share" @click="btnShare(true)">
					<image class="shop-share__icon" src="../../static/item_03.png"></image>
					<view class="shop-share__title">分享</view>
				</view>
			</view>

			<view class="shop-info__title">{{info.comTitle}}</view>
			<view class="shop-info__info">
				<text class="shop-info__item" v-if="info.freight===0">快递：包邮</text>
				<text class="shop-info__item" v-else>快递： {{info.freight}}元</text>
				<text class="shop-info__item">销量： {{info.salesVolume}}</text>
				<text class="shop-info__item text-overflow">{{info.shipAddress}}</text>
			</view>
		</view>

		<view class="shop-spec" @click="setIsSpec(true, 1)">
			<view class="shop-spec__title">请选择规格数量</view>
			<view class="link"></view>
		</view>

		<view class="shop-shop" v-if="info.shop">
			<image class="shop-shop__icon" :src="info.shop.shopLogo" mode=""></image>
			<view class="shop-shop__info">
				<text class="shop-shop__title">{{info.shop.shopName}}</text>
				<text class="shop-shop__desc">{{common.stringPartOf(info.shop.shopIntroduce, 18)}}</text>
			</view>
			<view class="shop-shop__view" @click="link('/pages/shop/shopIndexList?id='+info.shop.id)">进入店铺</view>
		</view>
		<view class="shop-detail__mc shop-shop">
			商品详情
		</view>
		<view class="shop-detail__detail">
			<rich-text :nodes="info.comDetails" class="rich-text"></rich-text>
		</view>
		
		<view class="shop-btns">
			<view class="shop-btns__btn" @click="link('/pages/index/index')">
				<image class="shop-btns__icon" src="../../static/item_04.png" mode=""></image>
				<text class="shop-btns__title">首页</text>
			</view>
			<view class="shop-btns__btn" @click="makePhone('')">
				<image class="shop-btns__icon" src="../../static/item_05.png" mode=""></image>
				<text class="shop-btns__title">客服</text>
			</view>
			<view class="shop-btns__btn" style="display: none;" @click="link('/pages/cart/cart')">
				<image class="shop-btns__icon" src="../../static/item_06.png" mode=""></image>
				<text class="shop-btns__title">购物车</text>
				<text class="shop-btns__num"></text>
			</view>
			<view class="shop-btns__buy">
				<!-- <view class="shop-btns__sub shop-btns__order" @click="setIsSpec(true, 4)">一键开团</view> -->
				<view class="shop-btns__sub shop-btns__order" @click="setIsSpec(true, 2)">加入购物车</view>
				<view class="shop-btns__sub shop-btns__cart" @click="setIsSpec(true, 3)">立即购买</view>
			</view>
		</view>
	
		<!-- 规格弹窗规格弹窗规格弹窗规格弹窗规格弹窗规格弹窗规格弹窗 -->
		<view class="pop-wrap" @touchmove.stop.prevent="moveHandle"  :animation='animationData' >
			<view class="pop-content pop-content-spec" > 
				<image class="pop-close" src="../../static/common/close.png" @click="setIsSpec(false)"></image>
				<view class="spec-item">
					<image class="spec-item__img" :src="selectSku.skuImg"></image>
					<view class="spec-item__info">
						<view class="spec-item__price price yuan">{{selectSku.price | formatMoney}}</view>
						<view class="spec-item__spec">{{selectSku.skuName}}</view>
					</view>
				</view>
				
				<scroll-view class="pop-scroll" :scroll-y="true">
					<view class="spec-type">
						<view class="spec-type__title"></view>
						<view class="spec-type__options">
							<text 
							v-for="spec in skus" 
							:key='spec.id' 
							:class="selectSkuId === spec.id?'btn spec-type__option spec-type__options__active':'btn spec-type__option'"
							@click="setSku(spec)"
							>{{spec.skuName}}</text>
						</view>
					</view>
					
					<view class="spec-num">
						<view class="spec-num__title">购买数量<text class="text" style="display: none;">(限购1件)</text></view>
						<view class="spec-num__op">
							<view class="shop-num">
								<text class="op-num" @click="setNum('-')">-</text>
								<input class="num" v-model="num"  type="text" />
								<text class="op-num" @click="setNum('+')">+</text>
							</view>
						</view>
					</view>
				</scroll-view>
				
				<!-- 选择规格 -->
				<view class="shop-btns__buy" v-if="opType===1">
					<view class="shop-btns__sub shop-btns__cart" @click="addToCart">加入购物车</view>
					<view class="shop-btns__sub shop-btns__order" @click="onceBuy">立即购买</view>
				</view>
				<!-- 加入购物车 -->
				<view class="btn spec-btn-buy" style="background-color: #CFA972;" v-else-if="opType===2" @click="addToCart">加入购物车</view>
				<!-- 立即购买 -->
				<view class="btn spec-btn-buy" v-else-if="opType===3" @click="onceBuy">立即购买</view>
				
				<!-- 一键开团 -->
				<view class="btn spec-btn-buy" v-else-if="opType===4" @click="addAssemble" style="background-color: #CFA972;">一键开团</view>
			</view>
		</view>
		
		<popShare :isShare='isShare' @closeShare='btnShare'></popShare>
		
		<view class="footer-block"></view>
	</view>
</template>

<script>
	import popSpec from '../../components/popSpec.vue'
	import popShare from '../../components/popShare.vue'
	import common from '../../utils/common.js'
	// #ifdef H5
	let jweixin = require('jweixin-module')  
	// #endif
	import { apiShop as api } from '../../utils/apiShop.js'
	import { api as apiAss } from '../../utils/api.js'
	export default {
		data() {
			return {
				animationData: {},
				animationShareData: {},
				num: 1, // 产品数量
				isSpec: false,
				opType: 1, // 1:选择规格，2：加入购物车， 3：立即购买, 4: 一键开团
				info: {},
				imgList: [],
				skus: [],
				id:'',
				defaultSku: {},
				selectSku: { },
				selectSkuId: '',
				
				isShare: false, // 控制分享弹窗
				userInfo: {},
				shareLink: '',
				common,
				sourceUserId: '',
				shopDetailId: '',
				
			};
		},
		
		async onLoad(options) {
			uni.removeStorageSync('shopDetailId')
			this.id = options.id 
			// #ifdef H5
			await this.getJsApiParam()
			// #endif
			this.getInfo()
		},
		
		onShow() {
			this.userInfo = common.getUserInfo()
		},
		
		methods:{
			btnShare(status) {
				// 需要先登录
				if(this.$isLogin()) {
					// #ifdef H5
					this.isShare = status
					// #endif
					
					// #ifndef H5
					 this.uniShare()
					// #endif
				}else{
					this.$login.uniLogin()
				}
			},
			
			setIsSpec(status, opType) {
				/* #ifdef H5 */
				if(!this.$isLogin()) {
					this.$login.uniLogin()
				}
				/* #endif */
				this.isSpec = status
				this.opType = opType
				
				let animation = uni.createAnimation({
					duration: '400',
					timingFunction: 'ease-out'
				})
				if (this.isSpec) {
					this.animationData = animation.opacity(1).top(0).step().export()
				} else {
					this.animationData = animation.opacity(0).top('100%').step().export()
				}
			},
			
			popSpecClose() {
				this.$emit('popSpecClose', false)
			},
			
			moveHandle() {},
			
			link(url) {this.$link(url)},
			
			makePhone(phone) { this.$makePhoneCall(phone) },
			
			getInfo() {
				let that = this
				let id = that.id
				api.commodityDetailsById({id},(res) => {
					 let temp = res.imgList
					 if(res.imgList) {
						 // 把白底产品图调制第一张
						 res.imgList.map((item, index) => {
							 if(item.isWhiteBac) {
								 temp.splice(index, 1)
								 temp.unshift(item)
							 }
						 })
					 }
					 // sku
					 let skus = res.comSkuInfo
					// console.log(sku);
					 let simpleInfo = {
						 skuName:'请选择规格',
						 skuImg: temp[0]['imgUrl'],
						 price:res.presentPrice,
						 presentPrice:'',
						 stock: 0,
						 id: ''
					 }
					 this.selectSku = simpleInfo
					 this.skus = skus
					 this.info = res
					 this.imgList = temp
					// #ifdef H5
					 this.share()
					// #endif
				}) 
			},
			
			setNum(type) {
				let num = parseInt(this.num)
				if(type === '-'){
					if(num > 1) {
						this.num = num - 1
					}
				}else{
					this.num = num + 1
				}
			},
			// 选择规格
			setSku(item) {
				console.log(item);
				this.selectSku.skuImg = this.selectSku.skuImg
				this.selectSku.skuName = '已选：' + item.skuName
				this.selectSku.price = item.price
				this.selectSku.id = item.id
				this.selectSkuId = item.id
			},
			
			// 立即开团
			addAssemble() {
				// #ifdef H5
				if (!this.$isLogin()) {
					this.$login.uniLogin()
				}else{
					if(!this.$isBindPhone()) {
						this.$link('/pages/login/login')
						return
					}
				}
				// #endif 
				let comSupId = this.info.id
				let askNum = this.num
				if(askNum <= 4) {  this.$showToast('开团人数最少5人~'); return }
				this.setIsSpec(false)
				apiAss.addAssemble({comSupId, askNum}, (res) => {
					this.$showModal('', '开团成功, 前往查看~', () => {
						this.$link('/pages/shop/shopTeamDetail?id='+res.id)
					})
				})
			},
			
			// 加入购物车
			addToCart() {
				// #ifdef H5
				if (!this.$isLogin()) {
					this.$login.uniLogin()
				}else{
					if(!this.$isBindPhone()) {
						this.$link('/pages/login/login')
						return
					}
				}
				// #endif 
				// comSkuId: 规格ID shopId: 店铺Id
				let shopId = this.info.shop.id
				let comSkuId = this.selectSkuId
				let num = this.num
				if(!comSkuId) {  this.$showToast('请选择规格~'); return }
				let items = api.addToCart({ shopId, comSkuId, qty: num },(res) => {
					 this.$showToast('加入购物车成功~')
				}) 
				this.setIsSpec(false)
			},
			
			// 立即购买
			onceBuy() {
				if (!this.$isLogin()) {
					this.$login.uniLogin()
				}else{
					if(!this.$isBindPhone()) {
						this.$link('/pages/login/login')
						return
					}
				}
				let comSkuId = this.selectSkuId
				if(!comSkuId) {  this.$showToast('请选择规格~'); return }
				this.setIsSpec(false)
				// 缓存商品信息
				let selectSku = this.selectSku
				let info = this.info
				let showInfo = {
					shopId: info.shop.shopId,
					shopName: info.shop.shopName,
					goodsId: info.id,
					goodsName: info.comTitle,
					goodsImg: this.imgList[0]['imgUrl'],
					goodsSkuId: comSkuId,
					goodsSkuName: selectSku.skuName,
					goodsSkuPrice: selectSku.price,
					goodsNum: this.num,
					goodsFreight: info.freight || 0
				}
				common.setStorage('userBuyGoods', showInfo)
				this.$link('/pages/mine/orderConfirm')
			 },
			 
			 getJsApiParam(callback) {
			 	let currentUrl = window.location.href
			 	uni.request({
			 	    url: common.apiHost + `wechat/getWxJsApiParams?curUrl=${currentUrl}` ,
			 	    data: { curUrl: currentUrl },
			 		method: 'GET',
			 	    success: (res) => {
			 	        res = res.data.result	
			 		   jweixin.config({
			 			 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			 			 appId: res.appId, // 必填，公众号的唯一标识
			 			 timestamp: res.timestamp, // 必填，生成签名的时间戳
			 			 nonceStr: res.nonceStr, // 必填，生成签名的随机串
			 			 signature: res.signature,// 必填，签名
			 			 jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的JS接口列表
			 			 // jsApiList: 'updateAppMessageShareData,updateTimelineShareData'.split(',')
			 		   });
			 	    }
			 	});
			 },
			 		
			 share() {
			 	let that = this
				let userInfo = common.getUserInfo()
				let info = that.info
			 	let title = info.comTitle
			 	let desc = '您的好友<'+userInfo.nickName+'>邀请你一起拼团购物, 优惠多多, 实惠多多!'
			 	let link = common.apiHost + `m/?#/?sourceUserId=${that.userInfo.id}&shopDetailId=${that.id}`
			 	let imgUrl = that.imgList[0]['imgUrl']
			 	let shareData = {
			 		title, // 分享标题
			 		desc, // 分享描述
			 		link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			 		imgUrl, // 分享图标
			 		success: function () {
			 		  // 设置成功
			 		 // that.$showToast(`页面分享成功, 分享链接为${link}`)
			 		},
			 		cancel: function() {
			 		}
			 	}
			 	jweixin.ready(function () {   //需在用户可能点击分享按钮前就先调用
			 	  jweixin.updateAppMessageShareData(shareData)
			 	  jweixin.updateTimelineShareData(shareData)
			 	});
			 },
			 
			 uniShare() {
				 let that = this
				 let userInfo = common.getUserInfo()
				 let info = that.info
				 let title = info.comTitle
				 let desc = '您的好友<'+userInfo.nickName+'>邀请你一起拼团购物, 优惠多多, 实惠多多!'
				 let link = common.apiHost + `m/?#/?sourceUserId=${that.userInfo.id}&shopDetailId=${that.id}`
				 let imageUrl = that.imgList[0]['imgUrl']
				 common.uniShare(link, title, desc, imageUrl)
			 }
		},
		
		components:{
			popShare
		}
	}
</script>

<style lang="less" scoped>
	@import url('../../app.less');
	
	.page-submit{
		bottom: 100rpx;
	}
	.pop-wrap {
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		top:100%;
	}

	.pop-content {
		background-color: @f;
		border-radius: 10upx 10upx 0 0;
		width: 100%;
		max-height: 80%;
		position: absolute;
		bottom: 0;
		padding: 20upx;
		box-sizing: border-box;
	}

	.pop-title {
		.flex-base;
		.pop-title__t {
			flex-grow: 2;
			margin-right: 20upx;
			margin-bottom: 20upx;
		}
		.pop-title__close {
			width: 30upx;
			height: 30upx;
			border-radius: 100%;
		}
	}
	.shop-detail {
		background-color: @bg-dark-color;
	}
	.banner-wrap {
		width: 750upx;
		height: 750upx;
	}

	.banner-swiper,
	.banner-swiper,
	.banner-item,
	.banner-img {
		width: 100%;
		height: 100%;
	}
	.shop-info {
		width: 100%;
		background-color: @f;
		.content-20;
		padding-right: 0;
	}
	.shop-price {
		.flex-base;
	}
	.shop-price__l {
		.price {
			font-weight: bold;
			font-size: @font-size-32;
			color: @theme-color;
		}
		.origin-price {
			font-weight: bold;
			font-size: @font-size-22;
			color: @font-dark-color;
			text-decoration: line-through;
			margin-left: 6upx;
		}
	}
	.tpl-share {
		background: @bg-dark-color;
		width: 100upx;
		height: 60upx;
		padding-left: 20upx;
		.flex-base;
		justify-content: flex-start;
		border-radius: 30upx 0 0 30upx;

		.shop-share__icon {
			width: 24upx;
			height: 24rpx;
		}

		.shop-share__title {
			color: #666;
			font-size: @font-size-24;
			margin-left: 10upx;
		}
	}

	.shop-info__title {
		font-size: @font-size-32;
		margin: 20upx 0 30upx 0;
		padding-right: 20upx;
	}

	.shop-info__info {
		padding-right: 20upx;
		.flex-base;
		.shop-info__item {
			color: @font-dark-color;
			font-size: @font-size-22;
		}
	}
	.shop-spec {
		height: 100upx;
		background-color: @f;
		padding: 0 20upx;
		box-sizing: border-box;
		.flex-base;
		margin: 20upx 0;
	}
	.shop-detail__mc {
		margin-bottom: 0;
	}
	.shop-detail__detail{
		background-color: @f;
	}

	.shop-btns {
		height: 100upx;
		border-top: 1px solid @border-color;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		background-color: @f;
		padding: 0 20upx;
		padding-left: 0;
		box-sizing: border-box;
		.flex-base;
	}

	.shop-btns__btn {
		width: 110upx;
		position: relative;
		.flex-base;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;

		.shop-btns__icon {
			width: 33upx;
			height: 33upx;
			display: block;
		}

		.shop-btns__title {
			width: 100%;
			display: block;
			text-align: center;
			font-size: @font-size-24;
			margin-top: 5upx;
		}

		.shop-btns__num {
			position: absolute;
			color: @f;
			background-color: @theme-color;
			border-radius: 6upx;
			display: block;
			.flex-base;
			justify-content: center;
			align-items: center;
			right: 12upx;
			top: -16upx;
			height: 24upx;
			min-width: 24upx;
			width: auto;
			padding: 2upx 5upx;
			font-size: @font-size-22;
		}
	}

	.shop-btns__buy {
		height: 80upx;
		flex-grow: 2;
		border-radius: 200upx;
		color: @f;
		.f28;
		.flex-base;
		border-radius: 40rpx;
		overflow: hidden;
	}

	.shop-btns__sub {
		padding: 0 10upx;
		box-sizing: border-box;
		width: 50%;
		height: 100%;
		line-height: 80upx;
		text-align: center;
		background-color: @theme-color;
	}
	
	.shop-btns__sub:first-child{
		background-color: @font-orange-color;
		border-radius: 200upx 0 0 200upx;
	}

	.shop-btns__cart {
		background-color: @theme-color;
		
	}

	.shop-btns__sub:nth-of-type(2) {
		border-left: 1px solid @border-color ;
		border-right: 1px solid @border-color ;
	}
	.shop-btns__sub:nth-of-type(3) {
		border-radius: 0 200upx 200upx 0;
	}
	
	.pop-wrap {
			background: rgba(0, 0, 0, 0.4);
			position: fixed;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			top:100%;
			.flex-base;
			align-items: flex-end;
		}
	
		.pop-content {
			background-color: @f;
			border-radius: 10upx 10upx 0 0;
			width: 100%;
			max-height: 80%;
			position: relative;
			bottom: 0;
			padding: 20upx;
			box-sizing: border-box;
			padding-top: 30rpx;
		}
	
		.pop-title {
			.flex-base;
			.pop-title__t {
				flex-grow: 2;
				margin-right: 20upx;
				margin-bottom: 20upx;
			}
			
		}
		.pop-close {
			width: 30upx;
			height: 30upx;
			border-radius: 100%;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}
		
		.shop-detail {
			background-color: @bg-dark-color;
		}
		
		.pop-content-spec{
			display: block;
			position: relative;
			padding: 0;
			.spec-item{
				width: 100%;
				.flex-base;
				padding: 30rpx;
				box-sizing: border-box;
				.bb;
			}
			.spec-item__img{
				width: 150rpx;
				height: 150rpx;
				.br;
			}
			.spec-item__info{
				flex-grow: 2;
				padding: 0 20rpx;
				box-sizing: border-box;
				.spec-item__spec{
					.f24;
					margin-top: 20rpx;
				}
			}
			.pop-scroll{
				padding: 0 30rpx;
				box-sizing: border-box;
			}
			.spec-type{
				.bb;
				padding: 30rpx 0;
				.spec-type__title{
					.f30;
					margin-bottom: 20rpx;
				}
			}
			.spec-type__options{
				.flex-base;
				flex-wrap: wrap;
				justify-content: flex-start;
				box-sizing: border-box;
			}
			.spec-type__option{
				height: 58rpx;
				line-height: 58rpx;
				background-color: @bg-dark-color;
				.f24;
				display: inline-block;
				margin-right: 20rpx;
				margin-bottom: 10rpx;
				color: @font-base-color;
			}
			.spec-type__option:nth-of-type(5n){
				margin-right: 0;
			}
			.spec-type__options__active{
				background-color: #fff9f2;
				border: 1px solid @font-orange-color;
				color:#cfa972;
				box-sizing: border-box;
			}
			.spec-num{
				.flex-base;
				.bb;
				height: 90rpx;
				.spec-num__title{
					.f30;
					.text{
						color:@theme-color
					}
				}
				.spec-num__op{}
			}
			.spec-btn-buy{
				margin: 30rpx auto;
				box-sizing: border-box;
				border-top: 1px solid @border-color;
				width: 690rpx;
				height: 100rpx;
				line-height: 100rpx;
				background: @theme-color;
				color: @f;
				.f32;
			}
		}
		
		.pop-scroll{
			max-height: 60vh;
			text-align: justify;
			overflow: hidden;
		}
		
		.pop-wrap{
			.shop-btns__buy {
				height: 80upx;
				flex-grow: 2;
				border-radius: 200upx;
				color: @f;
				.f28;
				.flex-base;
				width: 690rpx;
				margin: 30rpx auto;
			}
			
			.shop-btns__sub {
				padding: 0 10upx;
				box-sizing: border-box;
				width: 50%;
				height: 100%;
				line-height: 80upx;
				text-align: center;
			}
			
			.shop-btns__cart {
				background-color: @font-orange-color;
				border-radius: 200upx 0 0 200upx;
			}
			
			.shop-btns__order {
				background-color: @theme-color;
				border-radius: 0 200upx 200upx 0;
			}
		}
		
</style>
